<template>
	<el-dialog
		:title="$t('common.components.tip')"
		:visible="seaMoonVisible"
		width="480px"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		:before-close="beforeClose"
	>
		<el-form
			ref="seaMoonForm"
			:model="form"
			:rules="rules"
			:inline="true"
			style="text-align:center"
		>
			<el-form-item
				:label="$t('common.components.dynamic_password')"
				prop="secretKey"
				:error="errorMsg"
			>
				<el-input
					v-model="form.secretKey"
					clearable
					type="text"
					:placeholder="
						$t('common.components.input_dynamic_password')
					"
					style="width:300px"
					maxlength="6"
					@change="onChange"
					@input="
						form.secretKey = form.secretKey.replace(/[^0-9]+/g, '')
					"
				></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button :disabled="seaMoonLoading" @click="closeDialog">
				{{ $t('common.cancel') }}
			</el-button>
			<el-button
				:disabled="seaMoonLoading"
				type="primary"
				@click="confirm"
			>
				<i v-show="seaMoonLoading" class="el-icon-loading"></i>
				{{ $t('common.confirm') }}
			</el-button>
		</div>
	</el-dialog>
</template>

<script>
import validate from '@/mixins/validate'
export default {
	mixins: [validate],
	props: {
		seaMoonVisible: {
			type: Boolean,
			default: false
		},
		params: {
			type: Object,
			default: () => {}
		}
	},

	data() {
		return {
			form: {
				secretKey: '' // 海月盾密钥
			},
			seaMoonLoading: false,
			rules: {
				secretKey: [
					{
						required: true,
						message: this.$t(
							'common.components.input_dynamic_password'
						),
						trigger: 'blur'
					},
					{
						min: 6,
						message: this.$t('common.components.input6'),
						trigger: 'blur'
					}
				]
			},
			errorMsg: ''
		}
	},
	mounted() {
		this.form.secretKey = ''
	},
	activated() {
		this.form.secretKey = ''
	},
	methods: {
		onChange() {
			this.errorMsg = ''
		},
		closeDialog() {
			this.form.secretKey = ''
			this.errorMsg = ''
			this.$refs.seaMoonForm.clearValidate()
			this.$emit('update:sea-moon-visible', false)
		},
		beforeClose(done) {
			this.closeDialog()
			done()
		},
		confirm() {
			this.$refs.seaMoonForm.validate((valid) => {
				if (valid) {
					this.seaMoonLoading = true
					this.errorMsg = ''
					const data = {
						...this.params,
						...this.form
					}

					// 通过后关闭dialog，不通过提示错误
					this.$api
						.seaMoonValidate(data)
						.then(async (res) => {
							if (res.data === '0') {
								this.errorMsg = this.$t(
									'common.components.reinput'
								)
							} else if (res.data === '2') {
								this.$message.error(
									this.$t('common.components.lock')
								)
								await this.$store.dispatch('user/logout')
								await this.$store.dispatch(
									'permission/clearRoutes'
								)
								this.$router.push(
									`/login?redirect=${this.$route.fullPath}`
								)
							} else {
								this.closeDialog()
								this.$emit('success', res.data)
							}
							this.seaMoonLoading = false
						})
						.catch(() => {
							// 连续多次验证不通过锁定账号
							this.seaMoonLoading = false
						})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: left;
	color: #909399;
	font-weight: 700;
	border-bottom: 1px solid #00000015;
}
::v-deep .el-dialog__body {
	padding-bottom: 10px;
}
</style>
